<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<link type="text/css" href="/jQuery-Timepicker-Addon/1.6.3/css/jquery-ui-timepicker-addon.css" rel="stylesheet"/>
	<link rel="stylesheet" type="text/css" href="/jqGrid/css/ui.jqgrid.css" />
	<link rel="stylesheet" href="/select2/css/select2.css" />
	<link rel="stylesheet" type="text/css"  href="/themes/<%= theme %>/jquery-ui.min.css" />

	<script type="text/javascript" src="/js/jquery-3.3.1.min.js"></script>
	<script type="text/javascript" src="/jqGrid/js/grid.locale-cn.js"></script>
	<script type="text/javascript" src="/jqGrid/js/jquery.jqGrid.js"></script>
	<script type="text/javascript" src="/js/jquery-ui.js"></script>
	<script type="text/javascript" src="/select2/js/pinyin.min.js" ></script>
	<script type="text/javascript" src="/select2/js/select2.full.js" ></script>
	<script type="text/javascript" src="/select2/js/zh-CN.js" ></script>
	<script type="text/javascript" src="/jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-addon.js"></script>
	<script type="text/javascript" src="/jQuery-Timepicker-Addon/1.6.3/js/jquery-ui-timepicker-zh-CN.js"></script>
	<script type="text/javascript" src="/js/jsNodeId.js"></script>
	<script type="text/javascript" src="/js/index.js"></script>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
			font-size: small;
		}
		html,body{
		//overflow-x:hidden;
			-ms-overflow-style: scrollbar;
			height: 100%;
			box-sizing: border-box;
		}
	</style>
</head>
<body>
<div id="list_1" style="padding:5px;">
	<table id="list"></table>
	<div id="pager"></div>
</div>
<script type="text/javascript">
	$(function(){
		$(window).resize(function(){
			$(window).unbind("onresize");
			var winWh = pageSize();
			$("#list").jqGrid('setGridWidth', $("#list_1").width());//.jqGrid('setGridHeight', winWh.WinH-86);
			$(window).bind("onresize", this);
		});
	});
	// $.fn.select2.defaults.theme_default = "jquery-ui";
	$(document).ready(
		function() {
			// $.fn.select2.defaults.set("theme", "<%= theme %>");
			jQuery("#list").jqGrid({
				url:'/unuStocks/lists',
				datatype: "json",
				//dataType:'local',
				// editurl: 'clientArray',
				mtype : "GET",
				// postData:{'keyword':encodeURI(encodeURI(keyword))},
				// loadonce:true,
				shrinkToFit:true,
				height: 'auto',
				width:"100%",
				autowidth:true,
				colModel:[
					{label:'ID', name:'_id',index:'_id', hidden:true,editable : false}, //width:60,
					{label:'subId', name:'subId',index:'_id', hidden:true,editable : false}, //width:60,
					{label:'日期',name:'date',index:'date',editor:"text",edittype:"text",editable : false,
						formatter:function (cellvalue, options, rowObject) {
							return (new Date(cellvalue)).format("yyyy-MM-dd hh:mm:ss");
						},
						editoptions: {dataInit: function (elem) {$(elem).datetimepicker({
								defaultDate:+1,
								dateFormat: "yy-mm-dd",
								showSecond: true,
								changeYear:true,
								changeMonth:true,
								timeFormat: 'HH:mm:ss',
								stepHour: 1,
								stepMinute: 1,
								stepSecond: 1
							});
								if($(elem).val()==''){
									$(elem).datetimepicker('setDate',new Date());
								}
							}
						},editrules: {required: true},formoptions:{rowpos: 1, colpos: 3,
							elmprefix:'<span style="color: red;">*</span>'
						},
						searchoptions: {
							dataInit: function (elem) {
								$(elem).datetimepicker({
									// defaultDate:new Date(),
									dateFormat: "yy-mm-dd",
									showSecond: true,
									changeYear:true,
									changeMonth:true,
									timeFormat: 'HH:mm:ss',
									stepHour: 1,
									stepMinute: 1,
									stepSecond: 1
								});
								$(elem).datetimepicker('setDate',new Date());
							},
							sopt: ["le", "ge"]
						}
					},
					{label:'原因',name:'mode',index:'mode',editor:"text",width:80, editable : false,search:true,formatter:"select",edittype:"select",
						/*formatoptions: { defaultValue: 1 }, 显示有问题*/
						editoptions: {
							/*defaultValue: 1,*/
							value: {1:'损耗',2:'自用',3:'退货',4:'其他'}
						},
						stype:'select',
						searchoptions: {
							value: {1:'损耗',2:'自用',3:'退货',4:'其他'},
							defaultValue:"1",
							sopt: ["eq"]
						}, formoptions: {
							rowpos: 3, colpos: 1,
							elmprefix: '<span style="color: red;">*</span>'
						}
					},
					{label: '供应商',
						name: 'suId',
						index: 'suId',
						editor: "text",
						formatter: "select",
						edittype: "select",
						editable: true,
						editoptions: {
							value: getSupplierOptions(),
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									dropdownParent: $(elem).parent(),
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
								});
							}
						},
						editrules: {required: true},
						formoptions: {
							rowpos: 1, colpos: 2,
							elmprefix: '<span style="color: red;">*</span>'
						},
						stype: 'select',
						searchoptions: {
							value: {},
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									dropdownParent: $(elem).parent(),
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							},
							sopt: ["eq", "ne"]
						}
					},
					{label:'品类',name:'gId',index:'gId',editor:"text", formatter:"select",edittype:"select",editable : true,
						editoptions: {
							value: getGoodsOptions(),
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
								});
							}
						},editrules: {required: true},
						formoptions:{rowpos: 1, colpos: 2,
							elmprefix:'<span style="color: red;">*</span>'},
						stype:'select',
						searchoptions: {
							value: {},
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							},
							sopt: ["eq", "ne"]
						}
					},
					{label:'店铺',name:'sId',index:'sId',editor:"text", formatter:"select",edittype:"select",editable : false,
						editoptions: {
							value: getShopNames(),
							dataInit: function (elem) {
								$(elem).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							}
						},editrules: {required: true},formoptions:{rowpos: 3, colpos: 1,
							elmprefix:'<span style="color: red;">*</span>'},
						stype:'select',
						searchoptions: {
							value: {},
							dataInit: function (elem) {
								$(elem).css({ width: "100%" }).select2({
									language: "zh-CN",
									placeholder: {
										id: '-1', // the value of the option
										text: '请选择一个选项'
									},
									allowClear: true,
									// theme: "classic",
								});
							},
							sopt: ["eq", "ne"]
						}
					},
					{label:'数量',width:60,name:'num',index:'num',editor:"text", editable : false,search:false,sortable:false},
					{label:'备注',name:'rem',index:'rem',sortable : false,editable : true,search:false,
						edittype : "textarea",formoptions:{rowpos: 3, colpos: 2},editoptions : {rows : "2",cols : "20"}}
				],
				sortname:'_id',
				sortorder:'desc',
				viewrecords:true,
				rowNum:10,
				rowList:[10,20,30],
				pager:"#pager",
				// caption: "<%= title %>",
				multiselect: false,
				jsonReader: {
					id: "_id",
					root : "rows",
					page:"page",
					total:"total",
					records:"records",
					repeatitems: false
				},
				loadComplete:function(xhr){
				}
			});
			var values = $("#list").getColProp('suId').editoptions.value;
			$("#list").jqGrid('setColProp', 'suId', {searchoptions: {value: values}});
			var values = $("#list").getColProp('gId').editoptions.value;
			$("#list").jqGrid('setColProp', 'gId', {searchoptions: {value: values}});
			values = $("#list").getColProp('sId').editoptions.value;
			$("#list").jqGrid('setColProp', 'sId', {searchoptions: {value: values}});
			jQuery("#list").jqGrid('navGrid','#pager', {add:false,edit:false,del:false,search:true,refresh:false},
					{}, // edit
					{}, // add
					{}, // del
				{multipleSearch: true,closeAfterSearch: true,
					beforeShowSearch:function(form) {
						// $("#list").jqGrid('setGridParam',{url:"/unuStocks/lists"});
						return [true,""];
					}} // search
				);
		});
	function getGoodsOptions() {
		let data = {};
		runAjax('get', '/unuStocks/goodsLists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}
	function getShopNames() {
		let data = {};
		runAjax('get', '/unuStocks/shopsLists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}
	function getSupplierOptions() {
		let data = {};
		runAjax('get', '/unuStocks/suppliersLists', {}, function (err, result) {
			if (!err) {
				for (let i = 0; i < result.rows.length; i++) {
					data[result.rows[i]._id] = result.rows[i].name;
				}
			}
		});
		return data;
	}

</script>
</body>
</html>
